<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售统计 - 石墨网络验证</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
    <!-- 顶部提示框 -->
    <div id="top-notification" class="top-notification">
        <span id="notification-message"></span>
    </div>
    <div class="container">
        <h1>销售统计</h1>
        <div class="nav-links">
            <a href="index.html">返回销售页面</a>
        </div>
        
        <div class="statistics-filters">
            <label for="date-filter">选择日期范围:</label>
            <select id="date-filter">
                <option value="today">今日</option>
                <option value="all" selected>全部</option>
                <option value="yesterday">昨日</option>
                <option value="week">本周</option>
                <option value="month">本月</option>
            </select>
            <button id="filter-btn" class="btn">查询</button>
            <button id="export-today-json-btn" class="btn" style="margin-left: 10px;">导出今日JSON</button>
            <button id="export-today-xls-btn" class="btn" style="margin-left: 10px;">导出今日XLS</button>
            <button id="export-all-xls-btn" class="btn" style="margin-left: 10px;">导出所有XLS</button>
            

            <button id="batch-import-btn" class="btn" style="margin-left: 10px; ">批量导入每日数据(XLS格式)</button>
            <input type="file" id="batch-import-file" multiple style="display: none;" accept=".xls">
           
        </div>
        
        <div class="statistics-content">
            <div class="summary-cards">
                <div class="card">
                    <h3>总收入</h3>
                    <p id="total-revenue" class="amount">0.00</p>
                </div>
                <div class="card">
                    <h3>销售单数</h3>
                    <p id="total-orders">0</p>
                </div>
                <div class="card">
                <h3>客单价</h3>
                <p id="avg-order-amount" class="amount">0.00</p>
            </div>
            <div class="card">
                <h3>总利润</h3>
                <p id="total-profit" class="amount">0.00</p>
            </div>
            </div>
            
            <div class="chart-container">
                <h2>收入趋势</h2>
                <canvas id="revenue-chart"></canvas>
            </div>
            
            <div class="sales-table-container">
                <h2>销售记录</h2>
                <table class="sales-table">
                    <thead>
                <tr>
                    <th>日期</th>
                    <th>客户</th>
                    <th>产品</th>
                    <th>金额</th>
                    <th>利润</th>
                    <th>详情</th>
                    <th>备注</th>
                </tr>
            </thead>
                    <tbody id="sales-records-body">
                        <!-- 销售记录将通过JavaScript动态添加 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="statistics.js"></script>

    <!-- 自定义模态框 -->
    <div id="json-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h3>今日销售记录JSON</h3>
            <pre id="json-content"></pre>
    <button id="copyJsonBtn" class="copy-btn">复制JSON</button>
        </div>
    </div>

    <!-- 订单详情模态框 -->
    <div id="order-detail-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <div id="order-detail-content"></div>
        </div>
    </div>
    </body>
</html>